좌측 슬라이드 설정
🤚🏻
좌측 슬라이드란? 쇼핑몰 메인 좌측 상단의 햄버거 버튼을 클릭하면 노출되는 영역이며,
로그인, 마이페이지, 카테고리 목록, 게시판 목록, 배너 등을 함께 구성하여 쇼핑몰의 주요 콘텐츠를 한눈에 확인하고 원하는 메뉴로 쉽게 이동할 수 있도록 도와줍니다.
📌
좌측 슬라이드 노출 예시
좌측 슬라이드 설정 방법
Step1. 관리자 페이지에서 디자인관리로 접속합니다.
Step2. 좌측 메뉴에서 [좌측 슬라이드]로 들어갑니다.
Step3. 퀵메뉴, 카테고리 메뉴, 게시판 메뉴 등을 선택합니다.
Step4. 상단의 [추가]를 눌러 추가할 메뉴를 등록합니다.
좌측 슬라이드 영역별 상세 설정 및 노출 예시
1. 퀵메뉴 영역
마이페이지, 내 쿠폰, 포인트, 장바구니 등 주요 기능을 빠르게 확인하고 이동할 수 있도록 퀵메뉴 아이콘을 설정할 수 있습니다. 또한 직접 아이콘을 등록하고, 불러오기 버튼을 통해 메뉴 URL을 적용하여 원하는 메뉴로 연결할 수 있습니다.
A. 퀵메뉴 스타일 또는 레이아웃을 설정하며 메뉴명과 아이콘을 노출 여부를 설정합니다.
B. 신규 퀵메뉴를 추가 원할 경우 해당 퀵메뉴의 아이콘, 메뉴명, 메뉴 URL를 입력합니다.
- 아이콘의 [불러오기] 버튼을 통해 제작된 아이콘을 선택하여 업로드합니다. 아이콘은 48px*48px 크기를 권장합니다.
- 메뉴 URL의 [불러오기] 버튼을 통해 쇼핑몰 내 카테고리, 태그, 타임세일 등으로 이동을 설정합니다.
📌
· 퀵메뉴 추가한 후 노출여부를 ON으로 처리해야 해당 퀵메뉴가 노출됩니다.
· 메뉴 박스를 끌어서 순서를 변경할 수 있습니다.
C. 마이페이지, 내 쿠폰, 포인트 등 퀵메뉴들은 기본으로 제공되며 메뉴명을 변경하고 사용 여부를 설정할 수 있습니다.
2. 배너 영역
배너 그룹에 등록된 이벤트, 기획전, 혜택 안내 등을 노출할 수 있는 영역입니다.
운영 중인 프로모션이나 주요 안내 사항을 배너 형태로 구성하여 고객에게 전달할 수 있습니다.
A. 등록된 배너 그룹을 선택합니다.
B. 슬라이딩, 리스트 형식 등 배너 그룹의 노출 방식을 선택할 수 있으며, 선택한 방식에 따라 상세 노출 효과를 설정할 수 있습니다.
3. 카테고리 메뉴 영역
쇼핑몰에 등록된 모든 카테고리를 한곳에서 확인하고 이동할 수 있도록 제공되는 영역입니다.
A. 해당 영역의 타이틀 명칭 노출 여부와 노출 방식을 설정할 수 있습니다.
B. 메뉴(카테고리)의 아이콘, 하위 메뉴(하위 카테고리) 노출 여부와 메뉴 노출 방식을 설정할 수 있습니다.
C. 하위 메뉴의 노출 방식을 설정할 수 있습니다.
4. 추천상품 영역
원하는 상품들을 추천상품 그룹으로 자유롭게 묶어 진열할 수 있는 영역입니다.
A. 추천상품의 타이틀 유형을 텍스트 또는 이미지 형식으로 노출 설정할 수 있습니다.
B. 등록된 추천상품 그룹과 노출 방식을 선택합니다.
5. 상품그룹 영역
특정 상품 그룹 (카테고리, 태그, 타임세일, 선물하기 상품)을 노출시킬 수 있는 영역입니다.
A. 상품그룹의 타이틀을 텍스트 또는 이미지 형식으로 노출 설정할 수 있습니다.
B. 노출된 상품과 관련하여 더 많은 상품을 볼 수 있도록 이동하는 버튼을 설정할 수 있습니다.
C. [불러오기] 버튼을 통해 진열할 카테고리, 태그 등을 선택하고 노출 방식을 설정합니다.
6. 게시판 메뉴 영역
쇼핑몰에 등록된 모든 게시판을 한곳에서 확인할 수 있도록 제공되는 메뉴 영역입니다.
A. 해당 영역의 타이틀 명칭 노출 여부와 노출 방식을 설정할 수 있습니다.
B. 메뉴 (게시판)의 스타일을 설정하고, 하위 메뉴 (하위 게시판) 노출 여부를 선택합니다.
C. 하위 메뉴의 노출 방식을 설정할 수 있습니다.
7. 구분선 및 여백
좌측슬라이드 내 영역을 구분하여 고객이 콘텐츠를 보다 쉽게 확인할 수 있도록 하는 영역입니다.
A. 설정한 값이 실시간으로 반영되어 미리보기로 확인할 수 있습니다.
B. 구분선의 색상, 가로 길이, 두께와 선 종류를 설정할 수 있습니다.
선 없음으로 선택 후 여백을 설정하면 선이 없는 공란 여백으로 설정이 가능합니다.
C. 구분선을 기준으로 위/아래 여백 값을 입력합니다.
D. 일괄 적용 체크 시 레이아웃에 적용되어있는 모든 구분선 및 여백 설정이 동일하게 적용됩니다.